<template>
  <div>
   
    <div id="main" style="width: 800px; height: 500px"></div>
  </div>
</template>

<script>

import * as echarts from "echarts";
import campusArea from "../assets/guangdong.json";

import 'echarts-extension-amap';
export default {
  name: "my-map",
  data() {
      return {
      
        numList:[],
        maxNum:''
      }
  },
  methods: {
    drawerMap() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      myChart.showLoading();

      let geoJson = campusArea;
      myChart.hideLoading();
      echarts.registerMap("HK", geoJson);
      let option = {


        title: {
          text: "各校区个人电动车数量",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c} (辆)",
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          min: 0,
          max: this.maxNum,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        series: [
          {
            name: "华农各校区个人电动车数量",
    
            type: "map",

            map: "HK",
            label: {
              show: true,
            },
            data: this.numList,
            // 自定义名称映射
            nameMap: {},
          },
        ],
      };

      myChart.setOption(option);
    },

    getEBikeNumByCampus() {
      let v1, v2, v3, v4, v5, v6, v7, v8, v9;

      this.getPersonalEBikeNumCampus("泰山区")
        .then((v) => {
          v1 = v;
        })
        .then(() => {
          this.getPersonalEBikeNumCampus("启林南")
            .then((v) => {
              v2 = v;
            })
            .then(() => {
              this.getPersonalEBikeNumCampus("启林北")
                .then((v) => {
                  v3 = v;
                })
                .then(() => {
                  this.getPersonalEBikeNumCampus("华山区")
                    .then((v) => {
                      v4 = v;
                    })
                    .then(() => {
                      this.getPersonalEBikeNumCampus("六一区")
                        .then((v) => {
                          v5 = v;
                        })
                        .then(() => {
                          this.getPersonalEBikeNumCampus("黑山区")
                            .then((v) => {
                              v6 = v;
                            })
                            .then(() => {
                              this.getPersonalEBikeNumCampus("小五山")
                                .then((v) => {
                                  v7 = v;
                                })
                                .then(() => {
                                  this.getPersonalEBikeNumCampus("嵩山区")
                                    .then((v) => {
                                      v8 = v;
                                    })
                                    .then(() => {
                                      this.getPersonalEBikeNumCampus("单身宿舍")
                                        .then((v) => {
                                          v9 = v;
                                        })
                                        .then(() => {
                                          this.numList = [
                                            { value: v1, name: "泰山区" },
                                            { value: v2, name: "启林南" },
                                            { value: v3, name: "启林北" },
                                            { value: v4, name: "华山区" },
                                            { value: v5, name: "六一区" },
                                            { value: v6, name: "黑山区" },
                                            { value: v7, name: "小五山" },
                                            { value: v8, name: "嵩山区" },
                                       
                                            { name: "树木园", value: 0 }
                                          ];
                                        })
                                        .then(() => {
                                          this.$axios({
                                            method:'get',
                                            url:'/getMaxNum'
                                          }).then(res=>{
                                            this.maxNum=res.data
                                          }).then(()=>{
                                            this.drawerMap()
                                          })
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    },

     //根据校区得到个人电动车数量
    getPersonalEBikeNumCampus(campus) {
      return this.$axios({
        method: "get",
        url: `/getPersonalEBikeNumByCampus?campus=${campus}`,
      }).then((res) => {
        return res.data;
      })
    },

    
  },

  mounted() {
    
    this.getEBikeNumByCampus()
  },
};
</script>

<style>
#container {
  padding: 0rem;
  margin: 0rem;
  width: 800px;
  height: 510px;
}
</style>